<template>
  <div>
    <div class="cart-list" >  
    <div class="item"  >
      <div class="img"><check-button class="check" @checkBtn="checkBtn" :checked="item.checked"></check-button><img :src="item.img" alt="" class="a"></div>
      <div class="text">
        <p class="title1">{{item.title}}</p><br/>
        <p class="title2">{{item.title}}</p><br/><br/><br/>
        <p class="price">￥{{item.lowNowPrice}}</p> 
        <div class="count">X{{item.count}}</div>
      </div>
    </div>   
  </div>
  </div>
</template>

<script>


import checkButton from 'components/common/checkButton/checkButton.vue'

export default {
  name: 'cartListItem',
  components:{
    checkButton
  },
  props:{
    item:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  methods:{
    checkBtn(){
      this.$store.commit("modifyChecked",this.item.index);
    }
  }
}
</script>

<style scoped>
.cart-list{
    height: 100%;
  }
    .item{
      border-bottom: 2px solid rgba(182, 182, 182, 0.521);
      height: 150px;
    }
      .check{
        padding-left: 5px;
        /* border: brown 1px solid; */
        width: 20px;
        float: left;
      }
      .img{
        width: 130px;
        height: 130px;
        float: left;
        margin-top: 10px;
        /* border: rgb(99, 42, 165) 1px solid; */
      }
        .a{
          width: 100px;
          height: 130px;
          border-radius: 10px;
          float: right;
        }
      .text{
        float: right;
        width: 60%;
        /* border:2px red solid; */
        margin-bottom: -10px;
        padding-right: 10px;
      }
        .title1{
          padding-bottom: 20px;
          color: rgb(44, 44, 44);
          font-size: 20px;
          font-weight: 370;
          display: inline-block;
          white-space: nowrap;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .title2{
          color: rgb(44, 44, 44);
          font-size: 14px;
          font-weight: 350;
          display: inline-block;
          white-space: nowrap;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .price{
          color: #ff5777;
          font-size: 18px;
          font-weight: 350;
        }
        .count{
          position:relative;
          left: 200px;
          bottom: 20px;
          color: rgb(44, 44, 44);
          font-weight: 350;
        }
</style>